﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
        margin: 0;
        padding: 0;
        list-style: none;
        }
        #box{
            position: absolute;
            left: 30%;  
        }
        #box input{
            display: block;
            width: 500px;
            height: 50px;
        }   
        #box ul li{
            color:#ccc;
            width: 500px;
            /*text-align: center;*/
        }
        #box ul li p{
            /*float: left;*/
            color:black;
            border-bottom: 1px dotted cyan;
            padding-top: 10px;
            padding-bottom: 10px;
        }

    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script>
    window.onload=function(){
// http://searchtip.kugou.com/getSearchTip?keyword=a&callback=show
    var v=new Vue({
        el:'#box',
        data:{
            msg:'',
            arr:[],
            object:[],
            arr1:[],
            arr2:[],
            arr3:[],
            zd:[]
        },methods:{
            getname:function(index){
                var ad=encodeURI(index)
                console.log(index);
                this.$http({
                    url:'/gougou.do',
                    method:'get',
                    params:{
                        keyword:ad
                    },
                }).then(function(res){
                    // console.log(res.bodyText);
                    var rega=/undefined/gi;
                    var dd=res.bodyText.replace(rega,'');
                    var json=eval('('+dd+')');    
                   this.arr1=[]; this.arr2=[]; this.arr3=[];this.zd=[];this.msg='';
                   for (var i = 0; i < json.data["lists"].length; i++) {
                       this.zd.push({"name":json.data["lists"][i]["SingerName"],"hash":json.data["lists"][i]["FileHash"],"songname":json.data["lists"][i]["SongName"]});
                   };
                },function(){}) 
            },
            getmusic:function(index){
                this.$http({
                    url:'/gougoua.do',
                    method:'get',
                    params:{
                        hash:index
                    },
                }).then(function(res){
                    // console.log(res.bodyText);
                    var rega=/undefined/gi;
                    var dd=res.bodyText.replace(rega,'');
                    var json=eval('('+dd+')');  
                     var aud=document.getElementById('aud');
                     var img1a=document.getElementById('img1');
                     var txtr=document.getElementById('txtr');
                     document.getElementById('aud').src=json.data.play_url;
                     img1a.src=json.data.img;
                     txtr.value=json.data.lyrics;
			console.log(json.data.lyrics.split("\n"))
                     aud.play();
                   // this.arr1=[]; this.arr2=[]; this.arr3=[];
                   // for (var i = 0; i < json.data["lists"].length; i++) {
                   //     this.zd.push({"name":json.data["lists"][i]["AlbumName"],"hash":json.data["lists"][i]["FileHash"],"songname":json.data["lists"][i]["FileName"]});
                   // };
                },function(){}) 
            } 
        }
    })
    v.$watch('msg',function(){
        this.$http({
                    url:'http://searchtip.kugou.com/getSearchTip',
                    method:'JSONP',
                    params:{
                        keyword:this.msg
                    },
                    jsonp:'callback'
                }).then(function(res){
                    this.object=[];
                    for (var i = 0; i < res.data.data.length; i++) {
                        this.object.push(res.data.data[i].RecordDatas)
                    };
                        this.arr1=this.object[0];
                        this.arr2=this.object[1];
                        this.arr3=this.object[2];               
                    if (this.msg=='') {
                        this.arr1=[];
                        this.arr2=[];
                        this.arr3=[];
                    };
                },function(){})     
    })
    }
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg">
        <ul>
            <li v-show="arr1.length">根据歌名</br>
            <p v-for="v in arr1" track-by="$index" @click="getname(v.HintInfo)">{{v.HintInfo}}</p></li>
            <li v-show="arr2.length">根据歌手</br>
            <p v-for="v in arr2" track-by="$index">{{v.HintInfo}}</p></li>
            <li v-show="arr3.length">根据电视剧</br>
            <p v-for="v in arr3" track-by="$index"> {{v.HintInfo}}</p></li>
            <li v-show="zd.length">请选择</br>
            <p v-for="v in zd" track-by="$index" @click="getmusic(v.hash)"> {{v.songname}}--{{v.name}}</p></li>
        </ul>
        <img src="" id="img1">
        <textarea id="txtr"></textarea>
    <!-- <button @click="get">点击</button> -->
    <audio id="aud" controls></audio>
</div>
</body>
</html>
